.hl-fly {
    &::before {
        animation: hl-fly-l 3s infinite;
    }
    &::after {
        animation: hl-fly-r 3s infinite;
    }
    .lion-face {
        transform-origin: 50% -.5em;
        animation: hl-fly-face 3s infinite;
    }
}


@keyframes hl-fly-l {
    0%,
    5%,
    100% {
        transform: translate(-5em,0) scale(.1,.1) rotate(0);
        opacity: .5;
    }
    17% {
        transform: translate(-.5em,0) scale(.55,.55) rotate(105deg);
        opacity: .5;
    }
    29% {
        transform: translate(-6em,0) scale(1,1) rotate(135deg);
        opacity: .5;
    }
    41% {
        transform: translate(0,0) scale(1,1) rotate(135deg);
        opacity: .5;
    }
    49% {
        transform: translate(0,0) scale(1.1,1.1) rotate(135deg);
        opacity: .8;
    }
    56%,
    88% {
        transform: translate(0,0) scale(1,1) rotate(135deg);
        opacity: 1;
    }
}

@keyframes hl-fly-r {
    0%,
    5%,
    100% {
        transform: translate(5em,0) scale(.1,.1) rotate(0);
        opacity: .5;
    }
    17% {
        transform: translate(.5em,0) scale(.55,.55) rotate(-105deg);
        opacity: .5;
    }
    29% {
        transform: translate(6em,0) scale(1,1) rotate(-180deg);
        opacity: .5;
    }
    41% {
        transform: translate(0,0) scale(1,1) rotate(-180deg);
        opacity: .5;
    }
    49% {
        transform: translate(0,0) scale(1.1,1.1) rotate(-180deg);
        opacity: .8;
    }
    56%,
    88% {
        transform: translate(0,0) scale(1,1) rotate(-180deg);
        opacity: 1;
    }
}

@keyframes hl-fly-face {
    0%,
    35%,
    100% {
        transform: scale(0,0);
        opacity: 0;
    }
    49%,
    88% {
        transform: scale(1,1);
        opacity: 1;
    }
}
